import React, { Component } from "react";
import { CSSTransition } from 'react-transition-group';
import { Menu, Dropdown, Button, Icon, Input, Pagination, Select } from "antd";

import XHeader from "../../components/header";
import XFooter from "../../components/footer";

import Test_1 from "../../images/declaration/test_1.png";
import Test_2 from "../../images/declaration/test_2.png";
import Test_3 from "../../images/declaration/test_3.png";
import Test_4 from "../../images/declaration/test_4.png";
import Test_5 from "../../images/declaration/test_5.png";
import Banner_1 from "../../images/declaration/banner_1.png";

import "antd/dist/antd.css";
import "./index.scss";
const Option = Select.Option;
const state = ['全部', '申报中', '已结束'];
const stateType = ['全部', '国家级', '市级', '区级'];
const stateTypeItem = {
  '全部':['二级申报类型'],
  '国家级':['全部','文化和旅游部办公厅','国家艺术基金','中经文化产业','工业和信息化部办公厅'],
  '市级':['全部','市文创扶持资金','市经信委','市文广局','市新闻出版局','上海文化发展基金会','市发改委','市文化走出去扶持资金','市教委','市科委','市旅游局','市商务委'],
  '区级':['全部','黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','奉贤区','崇明区']
};
export default class Declaration extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stateCur: stateTypeItem[stateType[0]],
      stateType: stateTypeItem[stateType[0]][0],
    };
  }
  
  handleStateChange(e){
    console.log(e)
  }
  handleTypeChange(value){
    this.setState({
      stateCur: stateTypeItem[value],
      stateType: stateTypeItem[value][0],
    });
  }
  handleTypeItemChange(value){
    this.setState({
      stateType: value,
    });
  }
  componentDidMount() {}
  render() {
    const menu1 = (
      <Menu>
        <Menu.Item key="1">国家级</Menu.Item>
        <Menu.Item key="2">市级</Menu.Item>
        <Menu.Item key="3">区级</Menu.Item>
      </Menu>
    );


    const { stateCur } = this.state;
    return (
      <section className="page page-declaration">
        <div className="banner">
          <XHeader activeIndex={6} />
          <div className="inner">
            <div className="left">
              <CSSTransition
                in
                timeout={1000}
                classNames='fade-banner-h2'
                appear
              >
                <h2>覆盖各类文化产业</h2>
              </CSSTransition>
              <CSSTransition
                in
                timeout={2000}
                classNames='fade-banner-p'
                appear
              >
                <p>扶持资金申报信息</p>
              </CSSTransition>
            </div>
            <div className="right" />
          </div>
        </div>
        <div className="contain">
          <div className="inner">
            <div className="right">
              <div className="select">
                <span>申报状态 ：</span>
                <Select
                  defaultValue={state[0]}
                  style={{ width: 120 }}
                  onChange={this.handleStateChange.bind(this)}
                >
                  {state.map(state => <Option key={state}>{state}</Option>)}
                </Select>
                <span>申报类型 ：</span>
                <Select
                  defaultValue={stateType[0]}
                  style={{ width: 120 }}
                  onChange={this.handleTypeChange.bind(this)}
                >
                  {stateType.map(state => <Option key={state}>{state}</Option>)}
                </Select>
                <Select
                  defaultValue={this.state.stateType}
                  style={{ width: 120 }}
                  onChange={this.handleTypeItemChange.bind(this)}
                  className="last-select"
                >
                  {stateCur.map(state => <Option key={state}>{state}</Option>)}
                </Select>
              </div>
              <div className="search">
                关键字：
                <Input placeholder="请输入关键词" />
                <Button className="search-btn" type="primary">
                  查询
                </Button>
                <Button className="reset-btn">重置</Button>
              </div>
              <div className="all-item">
                <div className="item">
                  <div className="left">
                    <img src={Test_5} alt="" />
                  </div>
                  <div className="right">
                    <div className="title">
                      文化和旅游部办公厅关于开展2019年度国家文化和旅游科技创新工程项目申报…
                    </div>
                    <p>申报起止时间：2019年1月3日至2019年2月28日</p>
                    <p>申报状态：申报中</p>
                    <p>申报类型：国家级</p>
                    <p>信息来源：国家艺术基金</p>
                  </div>
                </div>
                <div className="item">
                  <div className="left">
                    <img src={Test_4} alt="" />
                  </div>
                  <div className="right">
                    <div className="title">
                      2019年度上海市促进文化创意 产业发展财政扶持资金项目申报指南
                    </div>
                    <p>申报起止时间：2019年2月25日至2019年3月15日</p>
                    <p>申报状态：申报中</p>
                    <p>申报类型：市级</p>
                    <p>信息来源：市文创办</p>
                  </div>
                </div>
                <div className="item">
                  <div className="left">
                    <img src={Test_1} alt="" />
                  </div>
                  <div className="right">
                    <div className="title">
                      2018年度徐汇区文化发展专项资金扶持项目申报指南
                    </div>
                    <p>申报起止时间：2018年9月7日至2018年9月25日</p>
                    <p>申报状态：已截止</p>
                    <p>申报类型：区级</p>
                    <p>信息来源：徐汇文创</p>
                  </div>
                </div>
                <div className="item">
                  <div className="left">
                    <img src={Test_2} alt="" />
                  </div>
                  <div className="right">
                    <div className="title">
                      上海市经济信息化委关于印发2019年上海市产业转型升级发展专项资金（品牌…
                    </div>
                    <p>申报起止时间：2019年2月4日至2019年2月28日</p>
                    <p>申报状态：申报中</p>
                    <p>申报类型：市级</p>
                    <p>信息来源：市经信委</p>
                  </div>
                </div>
                <div className="item">
                  <div className="left">
                    <img src={Test_3} alt="" />
                  </div>
                  <div className="right">
                    <div className="title">
                      关于开展2019年度国家舞台艺术精品创作扶持工程申报工作的通知(办艺发…
                    </div>
                    <p>申报起止时间：2018年11月26日至2018年12月22日</p>
                    <p>申报状态：已结束</p>
                    <p>申报类型：国家级</p>
                    <p>信息来源：文化和旅游部办公厅</p>
                  </div>
                </div>
              </div>
              <div className='pagination'>
                <Pagination
                  showQuickJumper
                  defaultCurrent={2}
                  total={500}
                />
              </div>
            </div>
            <div className="left">
              <div className="top">
                <div className="title">
                  <span>扶持资金公示栏</span>
                </div>
                <div className="content">
                  <p>2018年上海市促进文化创意产业发展财政扶持资金情况</p>
                  <p>2017年上海市促进文化创意产业发展财政扶持资金情况</p>
                  <p>2016年上海市促进文化创意产业发展财政扶持资金情况</p>
                  <p>2015年上海市促进文化创意产业发展财政扶持资金情况</p>
                  <p>2014年上海市促进文化创意产业发展财政扶持资金情况</p>
                  <p>2013年上海市促进文化创意产业发展财政扶持资金情况</p>
                  <p>2012年上海市促进文化创意产业发展财政扶持资金情况</p>
                </div>
              </div>
              <div className="bottom">
                <div className="title">
                  <div className="line" />
                  <div className="text">可申报项目大数据智能匹配</div>
                </div>
                <a className="img">
                  <img src={Banner_1} />
                </a>
              </div>
            </div>
          </div>
        </div>
        <XFooter />
      </section>
    );
  }
}
